<template>
	<div class="login-wrap">
		<el-form class="demo-ruleForm login-container">
			<h3 class="title">登录</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="user.username" auto-complete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="user.password" auto-complete="off" placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width: 100%;" type="primary" @click="doLogin">登录</el-button>
			</el-form-item>
			<el-form-item style="text-align: center;">
				<!-- <el-link type="primary">忘记密码</el-link> -->
				<!-- <el-link type="primary" @click="toRegister">快速注册</el-link> -->
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        ts: new Date().getTime(),
        user: {
          userId: null,
          username: null,
          password: null
        }
      }
    },
    methods: {
      // toRegister: function() {
      //   this.$router.push({
      //     path: '/register'
      //   });
      // },
      doLogin: function() {
        this.axios.post(this.axios.urls.SYS_USER_LOGIN, this.user).then((response) => {
          // console.log(response);
          if (0 == response.data.code) {
            this.$message({
              message: response.data.message,
              type: 'success'
            });
            // console.log(this.user.username)
            // console.log(response.data.result.userId)
            //将用户名保存vuex
            this.$store.commit('setUserName', {
              userName: this.user.username
            })
            //保存用户id
            this.$store.commit('setUserId', {
              userId: response.data.result.userId
            })
            this.$router.push('/AppMain/img')
          } else {
            this.$message.error(response.data.message);
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>
